<template>
  <div class="container">
    <DataView
      ref="userGrid"
      propViewKey="v_user"
      propViewForm="user/detail.vue"
      :propFlowKey="propFlowKey"
      :propCustomCols="['name']"
      @view-ready="handleViewReady"
      @flow-change="handleFlowChange"
    />
  </div>
</template>

<script>
import DataView from '@/components/DataView.vue'



const cmpName = `UvView-${global.utils.uuid()}`
export default {
  name: cmpName,
  data() {
    return {

    }
  },
  props: ['propFlowKey'],
  components: {
    DataView
  },
  methods: {
    handleRefreshClick() {

    },
    handleNameUpdate(row) {
      this.utilMessage.success(JSON.stringify(row))
    },
    getCellClass(field, value) {
      if (field === 'name' && value.indexOf('999') > -1) {
        return ['green']
      }
      if (field === 'name' && value.indexOf('777') > -1) {
        return ['red']
      }
      return []
    },
    handleViewReady() {

    },
    handleFlowChange(nodeValue) {
      const deleteButton = this.$refs.userGrid.viewButtons.find(item => item.key === 'vb-delete')
      this.$set(deleteButton, 'hidden', nodeValue == -1)
    }
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>
  .container {
    display: flex;
    height: 100%;
    background-color: #fff;
    border: 0px solid blue;
  }
  .red {
    background-color: red;
  }
  .green {
    color: green;
  }
</style>
